<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="editAppForm" ref="addAppRef" :rules="addApprules">
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="editAppForm.name" autocomplete="off" ref="name" readonly placeholder="请填写人员姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
        <el-select v-model="editAppForm.sex" placeholder="请选择性别" class="el-my-select" ref="type">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
        <el-input v-model="editAppForm.mobile" autocomplete="off" ref="mobile" placeholder="请输入联系电话"></el-input>
      </el-form-item>

      <el-form-item label="类型" :label-width="formLabelWidth" prop="personnelType">
        <el-select v-model="editAppForm.personnelType" placeholder="请选择人员类型" class="el-my-select" ref="personnelType"
          @change="selectType">
          <el-option label="在职人员" value="01"></el-option>
          <el-option label="退休人员" value="02"></el-option>
          <el-option label="后勤人员" value="03"></el-option>
          <el-option label="保洁人员" value="05"></el-option>
          <el-option label="其他人员" value="04"></el-option>
          <el-option label="编外人员" value="06"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校区" :label-width="formLabelWidth" prop="campus">
        <el-select v-model="editAppForm.campus" placeholder="请选择校区" class="el-my-select" ref="campus">
          <el-option v-for="(index, item) in schoolNames" :label="index" :value="item + 1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="">
        <el-input v-model="editAppForm.remark" autocomplete="off" ref="remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <!-- <el-form-item v-if="editAppForm.personnelType == '01' || editAppForm.personnelType == '02'" label="角色"
        :label-width="formLabelWidth" prop="rId">
        <el-select v-model="rId" placeholder="请选择角色" class="el-my-select" ref="rId">
          <el-option :label="item.name" :value="item.id" v-for="item in baseRoleList" :key="item.id"></el-option>
        </el-select>
      </el-form-item> -->

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";

import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, ElMessage },


  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      baseRoleList: [],
      personnelType: "",
      userType: '',
      rId: '',
      editAppForm: {
        name: "",
        sex: 1,
        personnelType: '',
        rid: 83,
        mobile: '',
        remark: '',
      },
      nowCampus: "",
      schoolNames: [],
      // 校验规则
      addApprules: {
        name: vxRule(true, null, "blur"),
        sex: vxRule(true, null, "blur"),
        mobile: vxRule(true, null, "blur"),
        campus: vxRule(true, null, "blur"),
        personnelType: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    getBasedecrypt(number) {
      let params = new FormData()
      params.append('encryptedData', number)
      httpService("/javaApi/crypto/decrypt", params, "post").then(
        (data) => {
          this.editAppForm.mobile = data
        }
      );
    },
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },

    getBaseTeacherById(id) {
      httpService("/javaApi/baseTeacher/queryById", { id: id }, "get").then(
        (data) => {
          console.log(data);
          this.editAppForm = data;
          this.editAppForm.sex = String(this.editAppForm.sex);
          this.editAppForm.personnelType = String(this.editAppForm.personnelType);
          this.editAppForm.mobile = this.getBasedecrypt(data.mobile)
          this.nowCampus = data.campus
          if (data.personnelType == '01') {
            this.rId = 83
          } else if (data.personnelType == '01') {
            this.rId = 84
          }
        }
      );
    },

    getBaseRole() {
      httpService("/javaApi/baseRole/list/1/1000", {}, "get").then(
        (data) => {
          this.baseRoleList = data.list
        }
      );
    },

    selectType() {
      if (this.editAppForm.personnelType == '01') {
        this.rId = 83
      } else if (this.editAppForm.personnelType == '02') {
        this.rId = 84
      }
    },

    clear() {
      this.dialogFormVisible = false;
      this.editAppForm.name = "";
      this.editAppForm.sex = "";
      this.editAppForm.mobile = "";
      this.editAppForm.rid = "";
      this.editAppForm.remark = "";
    },

    save() {
      this.$refs.addAppRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("name", this.editAppForm.name);
          params.append("sex", this.editAppForm.sex);
          params.append("mobile", this.editAppForm.mobile);
          params.append("remark", this.editAppForm.remark);
          params.append("personnelType", this.editAppForm.personnelType);
          params.append("id", this.editAppForm.id);
          params.append("campus", this.editAppForm.campus);
          params.append("rId", this.rId);
          httpService("/javaApi/baseTeacher/edit", params, "post").then(
            (data) => {
              if (data.code == 200) {
                if (this.nowCampus != this.editAppForm.campus) {
                  ElMessage.success("修改成功,调整校区后请重新设置人员部门和级部");
                } else {
                  ElMessage.success("修改成功");
                }
                this.clear();
                //刷新父组件的数据
                this.$parent.getBaseTeacherListApp();
              } else {
                ElMessage.error("修改失败");
              }
            }
          );
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
</style>